<template>
  <div class="bigLeft">
    <div class="bg">
      <div class="title d-flex">
        <span class="text">认证概况</span>
        <div class="line">
          <dv-decoration-3 class="dv-dec-3" />
        </div>
        <div class="unit">单位: 万人</div>
      </div>
      <dv-decoration-2 class="line2"/>
      <div class="content d-flex">
        <div class="rzList" v-for="(item, i) in data" :key="i">
          <div>
            {{ item.value }}
          </div>
          <p>{{ item.name }}</p>
        </div>
      </div>
      <div class="waterContent">
        <dv-water-level-pond :config="dataw" class="waterBox" style="width: 100%; height: 100%"/>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BigLeft1',
    props: {
      data: {
        type: Array,
        default: () => []
      },
      dataw: {
        type: Object,
        default: () => {}
      }
    },
    data () {
      return { }
    }
  }
</script>

<style scoped lang="less">
  .bigLeft {
    width: 100%; height: 100%; padding:14px;
    .bg {border-radius: 12px; background: rgba(35,62,249,0.2); height: 100%; padding: 10px}
    .title { position: relative;
      .text {
        color: #e4ebfb;
        font-size: 20px;
      }
      .line {
        width: 100px; height: 30px; margin-left: 10px;
        .dv-dec-3 {
          position: relative;
          width: 100%;
          height: 100%;
        }
      }
      .unit {
        color: #fff; font-size: 11px; text-align: right; padding-left: 15px
      }
    }
    .line2 {width:100%;height:5px;margin-top: 6px}
    .content {
      .rzList { color: #fff; width: 33.3%; text-align: center;
        padding-top: 10px;
        div { font-size: 32px;
          color: #ffa01f; font-weight: bold;
        }
        p{ font-size: 14px}
      }
      .rzList:nth-child(2){
        div {
          color: #62cb73;
        }
      }
      .rzList:nth-child(3){
        div {
          color: #f75f37;
        }
      }
    }
    .waterContent {
      width: 100%; height: 80px; display: flex;
    }
  }
  /deep/.waterBox text { font-weight: normal}
  /deep/.waterBox rect { width: 98.5%; height: 93.5%; box-sizing: border-box}
  .d-flex { display: flex;}
</style>
